<template>
<div>
    <Select v-model="model.province" style="width:100px" mgr1 @on-change="onProviceChange">
        <Option v-for="(item, index) in provinces" :key="index" :value="item.value.name">{{item.value.displayName}}</Option>
    </Select>
    <Select v-model="model.city" style="width:100px" mgr1 @on-change="onCityChange">
        <Option v-for="(item, index) in cities" :key="index" :value="item.value.name">{{item.value.displayName}}</Option>
    </Select>
    <Select v-model="model.county" style="width:100px" mgr1>
        <Option v-for="(item, index) in counties" :key="index" :value="item.value.name">{{item.value.displayName}}</Option>
    </Select>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase';
import UpdateAddress from './update-address.vue'

@Component({
    components: { UpdateAddress }
})
export default class AddressCard extends AbpBase{
    @Prop({type:Object}) value:any;
    get model():any {
        return this.value;
    }
    get areas() {
        return this.$store.state.setting.settings.areas;
    }
    get provinces() {
        var temp = [];
        var bigArea = this.areas.forEach(elem => {
            elem.children.forEach(elem2 => temp.push(elem2));
        });
        return temp;
    }
    get cities() {
        var province = this.provinces.find(elem => elem.value.name == this.model.province);
        return province ? province.children : [];
    }
    get counties() {
        var city = this.cities.find(elem => elem.value.name == this.model.city);
        return city ? city.children : []
    }
    onProviceChange() {
        this.model.city = '';
        this.model.county = '';
    }
    onCityChange() {
        this.model.county = '';
    }
	async created(){
        
	}
}
</script>